<template>
    <div class="app-container calendar-list-container">
        <!-- 正文 -->
        <section class="main-body">
            <el-row class="item">
                <span class="title">{{data.article_title}}</span>
            </el-row>
            <el-row class="item">
                <span class="author">{{data.create_username}}</span>
                &nbsp;&nbsp;
                <span class="author">{{data.create_time}}</span>
            </el-row>
            <el-row class="item content-img" v-html="data.article_content">
            </el-row>
        </section>
        <!-- 评论区 -->
        <section class="comment-body" v-loading="loading">
            <el-row class="item">
                <span class="title">全部评论</span>
                <el-button type="text" style="float: right;margin-left: 10px" @click="sortTime">时间</el-button>
                <el-button type="text" style="float: right" @click="sortLike">热度</el-button>
            </el-row>
            <el-row class="item">
                <ul>
                    <li v-for="(item,i) in comments" :key="item.id">
                        <el-row>
                            <el-col :span="2">
                                <img v-if="item.portrait" :src="item.portrait" class="avatar">
                                <i v-else class="iconfont ali-avatar"></i>
                            </el-col>
                            <el-col :span="21" :offset="1">
                                <div>
                                    <span>{{item.user_name}}</span>
                                    <el-button @click="delComment(item)" icon="iconfont ali-bin" type="text" size="mini" style="float: right;padding-top:5px;margin-left: 10px;"></el-button>
                                    <i class="iconfont ali-message icon" style="float: right;margin-left: 10px;">
                                        ({{item.child_sum || 0}})
                                    </i>
                                    <i class="iconfont ali-dianzan_active icon" style="float: right;margin-left: 10px;">
                                        ({{item.like_nums || 0}})
                                    </i>
                                </div>
                                <div class="time">
                                    <span>{{i + 1}}楼</span>
                                    <span>{{item.create_time | clacTime}}</span>
                                </div>
                                <span class="comment">{{item.comment_content}}</span>
                                <div class="hr"></div>
                            </el-col>
                        </el-row>
                    </li>
                </ul>
            </el-row>
        </section>
    </div>
</template>
<script>
import { article_findById } from '@/api/article'
import { articleComment_listAll, articleComment_delete, articleComment_getTree } from '@/api/articleComment'
import { clacTime } from '@/utils'
export default {
    name: 'communityDetail',
    data() {
        return {
            loading: false,
            data: {},
            comments: [],
            query: { order_by: 'create_time', sort: 'desc' }
        }
    },
    filters: {
        clacTime: function(value) {
            return clacTime(value)
        }
    },
    methods: {
        async delComment(e) {
            try {
                let res = await this.$confirm('确认删除吗？');
                if (res == 'confirm') {
                    const { data } = await articleComment_delete({ id: e.id })
                    if (data.status == 100) {
                        this.$message.success('删除成功')
                        this.initComment();
                    }
                }
            } catch (error) {
                console.log(error, 'error')
            }
        },
        sortTime() {//时间排序
            this.query.sort = this.query.sort == 'desc' ? 'asc' : 'desc'
            this.initComment();
        },
        sortLike() {//热度排序
            this.query.order_by = this.query.order_by == 'create_time' ? 'like_nums' : 'create_time'
            this.initComment();
        },
        async initList() {
            const { data } = await article_findById({ id: this.$route.query.id });
            if (data.status == 100) {
                this.data = data.data;
            }
            this.initComment();
        },
        async initComment() {
            const args = {
                article_id: this.$route.query.id,
                company_id: localStorage.getItem("companyId"),
            }
            const params = {...args, ...this.query}
            this.loading = true;
            const { data } = await articleComment_getTree(params);
            this.loading = false;
            if (data.status == 100) {
                this.comments = data.data
            }
        }
    },
    created() {
        this.initList();
    }
}
</script>
<style>
.content-img img{
    max-width: 100%;
}
</style>

<style lang="scss" scoped>
.main-body {
    width: 60%;
    margin-left: 20%;
    background-color: #fff;
    box-shadow: 2px 2px 2px #EBEEF5;
    margin-bottom: 20px;
    .item {
        padding: 20px;
    }
    .title {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
    }
    .author {
        font-size: 13px;
        color: #909399;
    }
    .content {
        font-size: 14px;
    }
}

.comment-body {
    width: 60%;
    margin-left: 20%;
    background-color: #fff;
    box-shadow: 2px 2px 2px #EBEEF5;
    margin-bottom: 20px;
    .item {
        padding: 20px;
    }
    .title {
        color: #C0C4CC;
        font-size: 15px;
        line-height: 30px;
    }
    .comment {
        color: #606266;
        font-size: 15px;
    }
    .avatar {
        width: 55px;
        height: 55px;
        border-radius: 50%;
    }
    .ali-avatar {
        font-size: 40px;
        color: #C6C5C5;
    }
    .time {
        font-size: 12px;
        color: #909399;
        margin: 5px 0;
    }
    .hr {
        border-bottom: 1px solid #DCDFE6;
        margin: 10px 0 5px 0;
    }
    .icon {
        font-size: 18px;
        color: #909399;
    }
}
</style>
